import React, { Component } from 'react';
import { Modal, Toast } from 'antd-mobile'
// icon图标
import { FaceRecognitionOutline, CheckOutline } from 'antd-mobile-icons'
// 导入css
import '../../styles/index/Shopcart.scss'
// 导入封装请求
import * as cart from '../../api/cart'

class Shopcart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cartlist: [],
            flag: '',
            count: '',
            ischeck: false
        }
    }

    // 列表分装
    cartlist = () => {
        var userid = localStorage.getItem("userid ")
        cart.shopcart_list({ userid }).then((res) => {
            this.setState({ cartlist: res.data.list })
            localStorage.setItem("cartlist", res.data.list)
            if (res.data.list != '') {
                this.setState({ flag: true })
            } else {
                this.setState({ flag: false })
            }
            // 全选的状态
            res.data.list.forEach(element => {
                if (element.ischeck) {
                    this.setState({ ischeck: true })
                } else {
                    this.setState({ ischeck: false });
                    return;
                }
            });
        })
    }

    // 获取购物车列表
    componentDidMount() {
        this.cartlist()
    }

    // 清空购物车
    clearlist() {
        var userid = localStorage.getItem("userid ")
        Modal.confirm({
            content: '确定要清空购物车吗',
            onConfirm: () => {
                cart.shopcart_clear({ userid }).then((res) => {
                    this.cartlist();
                    if (res.data.code == 200) {
                        Toast.show({
                            icon: <CheckOutline />,
                            content: '已清空购物车',
                            position: 'bottom',
                        })
                    }
                })

            },
        })

    }


    // 数量加一
    addCount(index) {
        var userid = localStorage.getItem("userid ")
        var goodid = this.state.cartlist[index].id
        cart.shopcart_add({ userid, goodid }).then(() => {
            this.cartlist()
        })
    }

    // 数量减一
    minCount(index) {
        var userid = localStorage.getItem("userid ")
        var goodid = this.state.cartlist[index].id
        cart.shopcart_sub({ userid, goodid }).then(() => {
            this.cartlist()
        })
    }

    // 是否选中
    handlecheck() {
        // this.setState({ischeck:false})
    }

    //计算总价
    addsum() {
        var sumPrice = 0;
        this.state.cartlist.forEach((item) => {
            sumPrice += item.salesPrice.value * item.count
        });
        return sumPrice;
    }


    render() {
        return (
            <div className='shopcart'>
                <div className='shopcart-header'>
                    <span className='cart'>购物车</span>
                    <span className='clear' onClick={() => { this.clearlist() }}>清空购物车</span>
                </div>

                {/* 当购物车为空时 */}
                <div className='icon' style={{ display: this.state.flag ? 'none' : 'block' }}>
                    <div><FaceRecognitionOutline fontSize={48} /></div>
                    <div>好凄凉,购物车空空如也</div>
                </div>
                {/* 当购物车有数据时 */}
                <div className='cartlist' style={{ display: this.state.flag ? 'block' : 'none' }}>
                    {
                        this.state.cartlist.map((item, index) => {
                            return (
                                // 购物车列表
                                <div className='cartlist-one' key={index}>
                                    <input type="checkbox" checked={item.ischeck} onChange={() => { this.handlecheck() }} />
                                    <span className='img'><img src={item.pic} alt="" /></span>
                                    <span className='name'>
                                        <span className='p'>{item.brandEN} {item.brand} {item.name}</span>
                                        <span className='price'>
                                            <p>￥{item.salesPrice.value}</p>
                                            <span className='btn'>
                                                <button onClick={() => { this.minCount(index) }}>-</button>
                                                <span className='btn-p'>{item.count}</span>
                                                <button onClick={() => { this.addCount(index) }}>+</button>
                                            </span>
                                        </span>
                                    </span>
                                </div>
                            )
                        })
                    }
                    {/* 购物车底部结算 */}
                    <div className='carttab'>
                        <input type="checkbox" checked={this.state.ischeck} onChange={() => { this.handlecheck() }} />全选
                        <span className='totalPrice' >总价:<span>￥{this.addsum()}</span></span>
                        <span className='settlement'>去结算({this.state.cartlist.length})</span>
                    </div>
                </div>
            </div>

        );
    }
}

export default Shopcart;